<!-- 运输单补全信息 -->
<template>
  <el-dialog
    title="补全信息"
    :visible.sync="dialogVisible"
    append-to-body
    width="40%"
    :close-on-click-modal="false"
  >
    <avue-form
      v-loading="loading"
      ref="form"
      v-model="form"
      :option="option"
    ></avue-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="close">关 闭</el-button>
      <el-button type="primary" v-noMoreClick @click="submit">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import {
  getCompletionInfo,
  submitCompletionInfo,
} from "@/api/transportation/demandorder";
export default {
  data() {
    return {
      dialogVisible: false,
      loading: false,
      form: {}, //签收信息
      demandId: "", //需求单id
      orderType: "", //货运订单类型
    };
  },
  components: {},
  computed: {
    //海运
    oceanShipping() {
      return this.orderType === "ZFB1" || this.orderType === "ZFB2";
    },
    //铁运
    railwayTransportation() {
      return this.orderType === "ZFO3" || this.orderType === "ZFO9";
    },
    option() {
      return {
        labelWidth: 120,
        submitBtn: false,
        emptyBtn: false,
        column: [
          {
            label: "实际装车日期",
            prop: "reallyLoadData",
            type: "datetime",
            span: 24,
            format: "yyyy-MM-dd hh:mm:ss",
            valueFormat: "yyyy-MM-dd hh:mm:ss",
            display: this.railwayTransportation,
            rules: [
              {
                required: true,
                message: "请选择实际装车日期",
                trigger: "change",
              },
            ],
          },
          {
            label: "车皮号",
            prop: "trainShell",
            span: 24,
            display: this.railwayTransportation,
            rules: [
              {
                required: true,
                message: "请输入车皮号",
                trigger: "blur",
              },
            ],
          },
          {
            label: "发站",
            prop: "trainSendLocation",
            span: 24,
            type: "select",
            display: this.railwayTransportation,
            props: {
              label: "describe",
              value: "code",
            },
            dicUrl: `/api/blade-tms/blade-station/station/dropDownBox?type=railwayPlatform`,
            rules: [
              {
                required: true,
                message: "请选择发站",
                trigger: "change",
              },
            ],
          },
          {
            label: "到站",
            prop: "trainTargetLocation",
            span: 24,
            type: "select",
            display: this.railwayTransportation,
            props: {
              label: "describe",
              value: "code",
            },
            dicUrl: `/api/blade-tms/blade-station/station/dropDownBox?type=railwayPlatform`,
            rules: [
              {
                required: true,
                message: "请选择到站",
                trigger: "change",
              },
            ],
          },
          {
            label: "铁路批车数",
            prop: "trainBatchNum",
            span: 24,
            display: this.railwayTransportation,
            rules: [
              {
                required: true,
                message: "请输入铁路批车数",
                trigger: "blur",
              },
            ],
          },
          {
            label: "装货日期",
            prop: "loadDate",
            type: "datetime",
            span: 24,
            format: "yyyy-MM-dd hh:mm:ss",
            valueFormat: "yyyy-MM-dd hh:mm:ss",
            display: this.oceanShipping,
            rules: [
              {
                required: true,
                message: "请输入装货日期",
                trigger: "change",
              },
            ],
          },
          {
            label: "船舶",
            prop: "boat",
            span: 24,
            display: this.oceanShipping,
          },
          {
            label: "开船日期",
            prop: "departureDate",
            type: "datetime",
            span: 24,
            format: "yyyy-MM-dd hh:mm:ss",
            valueFormat: "yyyy-MM-dd hh:mm:ss",
            display: this.oceanShipping,
            rules: [
              {
                required: true,
                message: "请选择开船日期",
                trigger: "change",
              },
            ],
          },
          {
            label: "提单号",
            prop: "deliverNo",
            span: 24,
            display: this.oceanShipping,
            rules: [
              {
                required: true,
                message: "请输入提单号",
                trigger: "blur",
              },
            ],
          },
          {
            label: "起运港",
            prop: "sendLocation",
            span: 24,
            type: "select",
            display: this.oceanShipping,
            props: {
              label: "describe",
              value: "code",
            },
            dicUrl: `/api/blade-tms/blade-station/station/dropDownBox?type=port`,
            rules: [
              {
                required: true,
                message: "请选择起运港",
                trigger: "change",
              },
            ],
          },
          {
            label: "目的港",
            prop: "targetLocation",
            span: 24,
            type: "select",
            display: this.oceanShipping,
            props: {
              label: "describe",
              value: "code",
            },
            dicUrl: `/api/blade-tms/blade-station/station/dropDownBox?type=port`,
            rules: [
              {
                required: true,
                message: "请选择目的港",
                trigger: "change",
              },
            ],
          },
          {
            label: "罐箱号",
            prop: "containerNo",
            span: 24,
            rules: [
              {
                required: true,
                message: "请输入罐箱号",
                trigger: "blur",
              },
            ],
          },
          {
            label: "箱量",
            prop: "boxCapacity",
            span: 24,
            rules: [
              {
                required: true,
                message: "请输入箱量",
                trigger: "blur",
              },
            ],
          },
        ],
      };
    },
  },
  methods: {
    open(id, orderType) {
      this.dialogVisible = true;
      this.form = {};
      this.demandId = id;
      this.orderType = orderType;
      this.loading = true;
      getCompletionInfo({ demandId: this.demandId }).then(
        ({ data }) => {
          this.loading = false;
          this.form = {
            ...data.data,
          };
        },
        (error) => {
          window.console.log(error);
          this.loading = false;
        }
      );
    },
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.loading = true;
          let updateData = {
            ...this.form,
            parentId: this.demandId,
          };
          delete updateData.id;
          submitCompletionInfo(updateData).then(
            () => {
              this.loading = false;
              this.dialogVisible = false;
              this.$emit("refresh");
              this.$refs.form.allDisabled = false;
              this.$refs.form.resetForm();
              this.$message({
                type: "success",
                message: "操作成功!",
              });
            },
            (error) => {
              window.console.log(error);
              this.loading = false;
              this.$refs.form.allDisabled = false;
            }
          );
        } else {
          this.$message({
            message: "请填写必填项",
            type: "error",
          });
          return false;
        }
      });
    },
    close() {
      this.dialogVisible = false;
      this.$refs.form.resetForm();
    },
  },
};
</script>

<style></style>
